<template>
  <jke-modal
    :visible.sync='jkeForm.visible'
    :width='1200'
    :title='jkeForm.title'
    :fullscreen.sync='jkeForm.fullscreen'
    :switchFullscreen='jkeForm.switchFullscreen'
  >
    <a-form-model ref='ruleForm' :model='formData' :rules='rules'>
      <a-card title='基本信息' :bordered='false' style='margin-top: 12px'>
        <a-row>
          <a-col :span='7'>
            <a-form-model-item label='工单编号' style='width: 100%'>
              <a-input v-model='formData.orderCode' disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span='1'></a-col>
          <a-col :span='7'>
            <a-form-model-item label='关联订单' style='width: 100%'>
              <a-input v-model='formData.saleOrderCode' disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span='1'></a-col>
          <a-col :span='7'>
            <a-form-model-item label='生产物品信息' style='width: 100%'>
              <a-input v-model='goodsName' disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span='1'></a-col>
          <a-col :span='7'>
            <a-form-model-item label='工序' style='width: 100%'>
              <a-input v-model='formData.processNumItem' disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span='1'></a-col>
          <a-col :span='7'>
            <a-form-model-item label='工单状态' style='width: 100%'>
              <div :style='{ color: StatusColor(formData.orderStatus) }'>{{ TextStatus(formData.orderStatus) }}</div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span='7'>
            <a-form-model-item prop='atTime' label='任务时间' style='width: 100%'>
              <a-range-picker
                style='width: 100%'
                v-model='formData.atTime'
                format='YYYY-MM-DD HH:mm'
                valueFormat='YYYY-MM-DD HH:mm'
                :placeholder="['请输入', '请输入']"
                @change='startTimeChange'
              />
            </a-form-model-item>
          </a-col>
          <a-col :span='1'></a-col>
          <a-col :span='7'>
            <a-form-model-item label='计划数' prop='planProduceNum' style='width: 100%'>
              <a-input @input='changeNum(formData.planProduceNum)' v-model='formData.planProduceNum' />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form-model>
    <div style='height: 353px; margin-top: 10px; background: #fff'>
      <createFormItemfrom ref='createFormItemRef' :formType='7' />
    </div>

    <div class='footer-submit form-footer'>
      <a-button @click='cancel' class='submitBtn' style='margin-right: 10px'> 取消</a-button>
      <a-button @click='submitForm' type='primary' :loading='subLoading' class='submitBtn'> 提交</a-button>
    </div>
  </jke-modal>
</template>
<script>
import createFormItemfrom from '@/components/createForm.vue'
import { getFileListByIds, editForm } from '@/api/produce/productionManage'
import { clearNoNum } from '@/utils/util'
import { unqualifiedList } from '@/api/quality/index'
import moment from 'moment'

export default {
  name: 'processChangeForm',
  props: {
    rowData: {
      type: Object | null
    }
  },
  components: {
    createFormItemfrom
  },
  watch: {
    'jkeForm.visible': function(val) {
      if (!val) {
        this.$emit('cancel')
      }
    }
  },
  data() {
    return {
      goodsName: '',
      subLoading: false,
      formData: {
        orderCode: undefined,
        planProduceNum: '',
        atTime: [],
        itemNum: '',
        processNumItem: ''
      },
      rules: {
        planProduceNum: [{ required: true, message: '请输入计划数', trigger: 'change' }],
        atTime: [{ required: true, message: '请选择任务时间', trigger: 'change' }]
      },
      jkeForm: {
        title: '编辑任务',
        visible: false,
        fullscreen: true,
        switchFullscreen: true
      },
      loadingSubmit: false,
      loading: false,
      processPlanNum: 0, //用于计算进度的计划数
      progressReportNum: 0 //用于计算进度的报工数
    }
  },
  created() {
  },
  methods: {
    startTimeChange(v) {
      this.formData.planStartTime = moment(v[0]).format('YYYY-MM-DD HH:mm:ss')
      this.formData.planEndTime = moment(v[1]).format('YYYY-MM-DD HH:mm:ss')
      this.$forceUpdate()
    },
    changeNum(v) {
      this.formData.planProduceNum = clearNoNum(v)
    },
    StatusColor(orderStatus) {
      if (orderStatus == 0) {
        return '#FF943E'
      }
      if (orderStatus == 1) {
        return '#1890FF'
      } else if (orderStatus == 2) {
        return '#15BC83'
      } else if (orderStatus == 3) {
        return '#EEEEEE'
      }
    },
    TextStatus(orderStatus) {
      if (orderStatus == 0) {
        return '未开始'
      } else if (orderStatus == 1) {
        return '生产中'
      } else if (orderStatus == 2) {
        return '已完成'
      } else if (orderStatus == 3) {
        return '已取消'
      }
    },
    initDetail(query) {
      this.jkeForm.visible = true
      getFileListByIds({ id: query.id }).then((res) => {
        if (res.code == 200) {
          this.formData = res.result
          this.formData.itemNum = `${this.formData.goodsCode}|${this.formData.goodsName}|${this.formData.serialSpecifications}`
          this.formData.processNumItem = `${this.formData.processesCode}|${this.formData.processesName}`
          this.goodsName = `${res.result.serialCode || '-'}|${res.result.serialName || '-'}|${
            res.result.serialSpecifications || '-'
          }`
          this.formData.atTime = [
            moment(res.result.planStartTime).format('YYYY-MM-DD HH:mm'),
            moment(res.result.planEndTime).format('YYYY-MM-DD HH:mm')
          ]
          setTimeout(() => {
            this.$refs.createFormItemRef.setFields({ ...res.result, inWarehouseTimeText: res.result.inWarehouseTime })
          }, 100)
        } else {
          this.$antdMessage.error(res.message)
        }
      })
    },

    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.$refs.createFormItemRef.form.validateFields(async (err, value) => {
            if (!err) {
              this.subLoading = true
              let form = {
                id: this.formData.id,
                planProduceNum: this.formData.planProduceNum,
                planStartTime: this.formData.planStartTime,
                planEndTime: this.formData.planEndTime
              }
              form.extDataJson = value.extDataJson
              const { code, message } = await editForm(form)
              if (code === 200) {
                this.$antdMessage.success(message)
                this.jkeForm.visible = false
                this.$emit('confirm')
              } else {
                this.$antdMessage.error(message)
              }
              this.subLoading = false
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    cancel() {
      this.jkeForm.visible = false
      this.$emit('confirm')
    }
  },
}
</script>
<style lang='less' scoped>
.auto-code-input {
  :deep(.ant-input) {
    border-right: 0px !important;
  }

  :deep(.ant-input-group-addon) {
    border-left: 0px !important;
  }
}

.flex(@jc, @ai, @fd: row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

.form-body {
  height: calc(100vh - 100px);
  overflow-y: scroll;
}

.form-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 100px;
  z-index: 2;
  display: flex;
  margin: 10px;
}

.submitBtn {
  .flex(center, center);
  padding: 8px;
}

.code-btn {
  position: absolute;
  right: 0;
  top: -34.5px;
}

.mb20 {
  margin-bottom: 20px;
}
</style>
